<style scoped>
.main{
  max-width: 400px;
  padding: 20px 0;
  margin: 0 auto;
  overflow: hidden;
}
  .number_info input{
      text-indent: 1em;
      font-size:30px ;
      line-height: 40px;
      width: 50%;
  }
  .number_info span:first-child{
    width: 20%;
    display: inline-block;
    text-align: center;
  }
  .number_info span:last-child{
    width: 80px;
    line-height: 45px;
    background: #609bf7;
    color: #ffffff;
    text-align: center;
    float: right;
    border-radius: 5px;
  }
  .jisuanqi li{
    box-sizing: border-box;
    float: left;
    border:1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
    width: 16%;
    background: #ffffff;
    margin-top: 10px;
    margin-right: 5%;
  }
  .jisuanqi li:nth-child(5n){
    margin-right: 0px;
  }
</style>
<template>
  <div class="main">
    <div class="number_info">
      <span>算式</span>
      <input type="text" v-model="text">
        <span @click="get_generate()">生成</span>
    </div>
    <div class="jisuanqi">
        <ul>
          <li v-for="i in number_list" v-text="i"
              @click="generate(i)"
          ></li>
        </ul>
    </div>
  </div>
</template>
<script type="es6">
  import { mapMutations } from 'vuex'
  export default{
    data (){
      return {
        number_list: [
          1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '+', '-', '*', '/', '←'
        ],
        text: ''
      }
    },
    methods: {
      generate (text){
        //输出字符
        if (text == '←') {
          this.text = this.text.substring(0, this.text.length - 1)
          return
        }
        if (text == '+' ||text == '-' ||text == '*' ||text == '/') {
          if (this.text.indexOf('+') != -1 || this.text.indexOf('-') != -1 || this.text.indexOf('*') != -1 || this.text.indexOf('/') != -1) {
            return
          }else{
            this.text += text;
            return
          }
        }
        this.text += text;
      },
      get_generate (){
        /*
            判断显示不同组件
            存储数据
         */
        var t = ''
        if(this.text.indexOf('+')!=-1){
          t = 'add'
        }
        if(this.text.indexOf('-')!=-1){
          t = 'reduce'
        }
        if(this.text.indexOf('*')!=-1){
          t = 'ride'
        }
        if(this.text.indexOf('/')!=-1){
          t = 'except'
        }
        this.$store.commit('setStart',t);
        this.$store.commit('add_number_info',this.text)
      }
    }
  }
</script>
